<template>
	<view>
		<view class="content" v-if="dataList.length < 1">
			<u-empty text="所谓伊喵，勇往直前" mode="list"></u-empty>
		</view>
		<view v-else>
			<view>
				<view v-for="item in dataList" :key="item.id"
					style="display: flex;justify-content: center;border-radius: 25rpx;">
					<view style="display: flex;width: 99%;border-radius: 25rpx;margin: 1% 0;">
						<view
							style="background: radial-gradient(circle, rgba(238,174,202,1) 20%, rgba(171,184,225,1) 67%, rgba(148,187,233,1) 84%);width: 20%;height: 100%;display: flex;justify-content: center;align-items: center;border-radius: 25rpx 0 0 25rpx;">
							<u-avatar :src="baseUrl+item.avatar" size="large" @click="pageToMine()"></u-avatar>
						</view>
						<view style="width: 80%;border-radius: 25rpx;">
							<u-cell-group>
								<u-cell-item :title="item.title" :arrow="false">
									<u-icon slot="icon" size="35" :name="getTypeText(item.title)"></u-icon>
									<u-icon slot="right-icon" size="35" :color="item.status == 0 ? '#fa3534':'#19be6b'"
										:name="item.status == 0 ? 'close-circle':'checkmark-circle'"></u-icon>
								</u-cell-item>
								<view v-for="temp in item.cellListOfSimples" :key="temp.id">
									<u-cell-item :title="temp.planTitle" :label="temp.startTime +' - ' +temp.endTime"
										:arrow="temp.status == 0 ?true:false" @click="expendDetail(temp,item)"
										v-if="item.title !=='待办事项'">
										<text slot="right-icon"
											:style="{'color':temp.status == 0 ? '#fa3534':'#19be6b'}">
											{{getStatusText(temp.status)}}
										</text>
									</u-cell-item>
									<u-cell-item :arrow="temp.status == 0 ?true:false" @click="expendDetail(temp,item)"
										v-else>
										<view slot="title">
											<text>{{temp.planTitle}}</text>
											<view style="display: flex;justify-content: flex-start;margin: 3% 0;">
												执行人：
												<u-avatar v-for="(inner,innerIndex) in temp.avatar" :key="innerIndex"
													size="50" :src="baseUrl + inner"></u-avatar>
											</view>
										</view>
										<text slot="right-icon"
											:style="{'color':temp.status == 0 ? '#fa3534':'#19be6b'}">
											{{getStatusText(temp.status)}}
										</text>
									</u-cell-item>
								</view>
							</u-cell-group>
						</view>
					</view>
				</view>
				<u-loadmore status="nomore" />
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getBillListOfSimple
	} from '@/api/bot/bill'
	import config from '@/config'
	export default {
		name: "Bill",
		props: ['query'],
		data() {
			return {
				dataList: [],
				baseUrl: config.baseUrl,
			};
		},
		mounted() {
			this.getBillListOfSimple()
		},
		watch: {
			query(newValue) {
				if (newValue.pageNum == 1) {
					this.dataList = []
				}
				this.getBillListOfSimple()
			}
		},
		computed: {
			statusMap() {
				return {
					0: '待完成',
					1: '已完成',
				}
			},
			typeMap() {
				return {
					'存钱计划': 'rmb-circle',
					'出行计划': 'car',
					'待办事项': 'file-text',
					'学习计划': 'edit-pen',
					'日常计划': 'moments'
				}
			}
		},
		methods: {
			getBillListOfSimple() {
				uni.showLoading({
					title: "加载中..."
				})
				uni.getStorage({
					key: 'groupIdByIndex',
					success: (res) => {
						let data = JSON.parse(res.data);
						let groupId = data.id;
						let query = {
							...this.query,
							groupId: groupId
						}
						this.getList(query)
					}
				});
			},
			getList(query) {
				getBillListOfSimple(query).then(res => {
					this.dataList = this.dataList.concat(res.rows);
					uni.hideLoading()
				})
			},
			expendDetail(temp, item) {
				let obj = {
					currentBill: item,
					currentItem: temp
				}
				this.$emit('openBillAction', obj)
			},
			getStatusText(status) {
				return this.statusMap[status] || '未知状态'
			},
			getTypeText(type) {
				return this.typeMap[type] || '未知状态'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10%;
	}
</style>